<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title title="案件查办情况"></Title>
    <!-- <div class="legend">
      <div class="item">
        <div class="icon">
          <span style="background-color:#87CB5C"></span>
          <span style="background-color:#4D8728"></span>
        </div>
        <div class="text">检查</div>
      </div>
      <div class="item">
        <div class="icon">
          <span style="background-color:#388CEC"></span>
          <span style="background-color:#106ECC"></span>
        </div>
        <div class="text">审理</div>
      </div>
      <div class="item">
        <div class="icon">
          <span style="background-color:#D74C6F"></span>
          <span style="background-color:#AB152C"></span>
        </div>
        <div class="text">执行</div>
      </div>
      <div class="item">
        <div class="icon">
          <span style="background-color:#E9B842"></span>
          <span style="background-color:#D76618"></span>
        </div>
        <div class="text">结案</div>
      </div>
    </div> -->
    <div class="echart-wrapper flex1">
      <echartCompt class="echart" v-model="chartOption"></echartCompt>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import * as echartOption from "@/components/echart-axis";

export default {
  name: "ajcbqk",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      EchartData: {
        jcsl: 0,
        slsl: 0,
        zxsl: 0,
        jasl: 0,
        aycx: 0,
        qt: 0,
      }, // 图表数据
    };
  },
  computed: {
    chartOption() {
      let _this = this;
      let color = [
        ["#87CB5C", "#4D8728"],
        ["#388CEC", "#106ECC"],
        ["#D74C6F", "#AB152C"],
        ["#E9B842", "#D76618"],
        ["#e53de7", "#aa09ac"],
        ["#19ecee", "#10ac9f"],
      ];
      let xData = ["检查", "审理", "执行", "结案", "案源撤销", "其他"];
      let yData = [
        this.EchartData.jcsl,
        this.EchartData.slsl,
        this.EchartData.zxsl,
        this.EchartData.jasl,
        this.EchartData.aycx,
        this.EchartData.qt,
      ];
      let series = [
        {
          type: "pictorialBar",
          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
          data: yData,
          barWidth: 100,
          barCategoryGap: "-130%",
          symbolOffset: [0, 0],
          z: 99,
          label: {
            show: true,
            position: "top",
            distance: 8,
            fontSize: 12,
            color: "#ffffff",
          },
          itemStyle: {
            color: function (params) {
              let itemColor = color[params.dataIndex];
              return new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: color[params.dataIndex][0],
                },
                {
                  offset: 0.5,
                  color: color[params.dataIndex][0],
                },
                {
                  offset: 0.5,
                  color: color[params.dataIndex][1],
                },
                {
                  offset: 1,
                  color: color[params.dataIndex][1],
                },
              ]);
            },
          },
        },
      ];
      let option = {
        tooltip: {
          show: false,
        },
        grid: echartOption.echartGrid({
          top: 60,
          right: 60,
        }),
        xAxis: {
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
          data: xData,
        },
        yAxis: {
          ...echartOption.yAxisDw("件"),
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
        },
        series,
      };
      return option;
    },
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsJccxService/ajcbqkQuery",
      method: "post",
      data: {
        param: {
          swjg: this.$route.query.qx_swjg_dm,
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
    });
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 536px;
  height: 476px;
}
.legend {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 90px;
    width: 90px;
    .icon {
      width: 20px;
      height: 12px;
      margin-right: 8px;
      display: flex;
      border-radius: 2px;
      overflow: hidden;
      span {
        flex: 1;
        height: 18px;
      }
    }
    .text {
      font-size: 15px;
      color: #ffffff;
    }
  }
}
.echart-wrapper {
  .echart {
    height: 100%;
  }
}
</style>
